/* -------------------------------- *\
   RESET
\* -------------------------------- */


html {
	height: 100%;
	margin: 0;
	padding: 0;
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-600px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

ul, li{
	margin: 0;
	padding: 0;
	list-style: none;
}

p{
	margin: 0;
}

.clear {
	zoom: 1;
}

.clear:after {
	content: '';
	display: block;
	clear: both;
}


/* -------------------------------- *\
   CALENDER
\* -------------------------------- */


.calender{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 400px;
	color: #333;
	border: 10000px solid rgba( 0, 0, 0, .5 );
	transform: translate( -50%, -50% );
}

	.calender-header{
		overflow: hidden;
		height: 5rem;
		padding: 1rem 1.125rem;
		color: #fff;
		background: #5FB878;
		box-sizing: border-box;
	}
	
		.calender-header > p{
			width: auto;
			line-height: 1;
		}
		
		.calender-header > p.calender-show-year{
			font-size: .875rem;
		}
		
		.calender-header > p.calender-show-day{
			margin-top: .375rem;
			font-size: 1.5rem;
		}
		
		
	.calender-footer{
		padding: 1.125rem;
		text-align: right;
	}
	
		.calender-footer > span{
			margin: 0 .5625rem;
			color: #009688;
			text-decoration: none;
		}
		
	
	.calender-body{
		box-sizing: border-box;
	}
	
		.calender-hide {
			position: absolute;
			z-index: -1;
			visibility: hidden;
		}

			.calender-date-bar{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				line-height: 2.875rem;
				font-size: .875rem;
				text-align: center;
				border-bottom: 1px solid #e2e2e2;
			}

				.prev-month:after{
					content: '';
					display: block;
					width: 16px;
					height: 16px;
					background-image: url(  );
					background-size: contain;
				}

				.next-month:after{
					content: '';
					display: block;
					width: 16px;
					height: 16px;
					background-image: url(  );
					background-size: contain;
				}

				.prev-year-group:after{
					content: '';
					display: block;
					width: 16px;
					height: 16px;
					background-image: url(  );
					background-size: contain;
				}
				
				.next-year-group:after{
					content: '';
					display: block;
					width: 16px;
					height: 16px;
					background-image: url(  );
					background-size: contain;
				}

			.calender-content{
				width: 100%;
				height: 17.875rem;
				padding: .625rem;
				box-sizing: border-box;
			}
			
				.calender-item{
					float: left;
					width: 14.286%;
					height: 2.375rem;
					font-size: .875rem;
					line-height: 2.375rem;
					text-align: center;
				}


				.calender-item:hover,
				.calender-year-item:hover{
					background-color: #eee;
					color: #fff;
				}

				.calender-item.active,
				.calender-year-item.active{
					background-color: #5FB878;
					color: #fff;
				}

				.calender-item.active{
					border-radius: 8px;
				}
				
				.calender-year-item{
					float: left;
					width: 33.33%;
					height: 2.375rem;
					font-size: .875rem;
					line-height: 2.375rem;
					text-align: center;
				}